<template>
  <gui-page :customHeader="true" :customFooter="true" class="gui-bg-white">
    <!-- 自定义头部导航 -->
    <!-- 自定义头部导航 -->
    <template v-slot:gHeader>
      <view
        style="height: 44px"
        class="gui-header-detail gui-flex gui-nowrap gui-rows gui-justify-content-center gui-align-items-center gui-bg-white gui-border-b"
      >
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-xhs-header-leading
          :home="false"
          @goBack="goBack"
        ></gui-xhs-header-leading>

        <!-- 导航文本此处也可以是其他自定义内容 -->
        <view
          class="gui-flex1 align-items-center gui-nowrap gui-flex gug-row"
          style="margin-left: 20rpx"
        >
          <image
            @tap="goCard(note.authorId)"
            style="width: 70rpx; height: 70rpx; border-radius: 70rpx"
            :src="note.authorAvatar"
            class="gui-slide-list-img xhs-margin-right-20"
            mode="aspectFill"
          ></image>

          <view class="xhs-font30 gui-flex1" style="line-height: 70rpx">{{
            note.authorName
          }}</view>

          <view>
            <gui-xhs-follow
              class="xhs-follow"
              :author="author"
              @cancelfollowAuthor="getAuthor()"
              @followAuthor="getAuthor()"
            ></gui-xhs-follow>
          </view>
        </view>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view
          @tap="confirm"
          class="xhs-font30"
          style="width: 80rpx; color: gray"
        >
          ···
        </view>
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>

    <template v-slot:gBody>
      <video
        id="myVideo"
        class="gui-course-video"
        :src="note.musicUrl"
        :poster="note.firstPicture"
        controls
      ></video>

      <view class="gui-bg-white">
        <!-- 文章标题 -->
        <view class="gui-padding">
          <text class="gui-h4">{{ note.noteTitle }}</text>
          <view style="margin-top: 10rpx; font-size: 30rpx">
            <view style="letter-spacing: 1rpx">
              {{ note.noteContent }}
            </view>
            <!--						<rich-text :nodes="note.noteContent" style="letter-spacing: 3rpx;"></rich-text>-->
          </view>
          <view style="color: #acacac; font-size: 26rpx; margin-top: 20rpx">
            {{
              note.version > 1
                ? "编辑于 " + formatDate(note.updateTime)
                : formatDate(note.createTime)
            }}

            {{ note.ipRealAddress }}</view
          >

          <view
            class="gui-title-line gui-margin-top"
            style="width: 100%; height: 1rpx"
          ></view>

          <view
            class="gui-color-gray"
            style="margin-top: 25rpx; font-size: 26rpx"
            >共{{ totalCount }}条评论
            <text
              style="float: right"
              @tap="editNote"
              v-show="user.authorId == note.authorId"
              >编辑</text
            >
          </view>

          <view class="gui-flex gui-row gui-space-between gui-margin-top">
            <view style="width: 70rpx; height: 70rpx">
              <image
                @tap="openComment()"
                style="width: 65rpx; height: 65rpx; margin-top: 2.5rpx"
                class="gui-list-image ucenter-face-image"
                :src="user.avatarUrl"
                mode="aspectFill"
              ></image>
            </view>

            <gui-xhs-message-search
              class="message-search"
              :disabled="true"
              iconFontSize="35rpx"
              style="
                height: 70rpx;
                padding-left: 20rpx;
                margin-left: 20rpx;
                padding-right: 20rpx;
              "
              placeholder="留下你的想法吧"
              @tapme="openComment()"
            ></gui-xhs-message-search>
          </view>

          <gui-empty v-if="replys.length == 0" style="height: 200rpx">
            <template v-slot:img>
              <view class="gui-flex gui-rows gui-justify-content-center">
                <text
                  class="gui-icons gui-empty-icon gui-color-gray"
                  style="font-size: 40rpx"
                  >&#xe6b8;</text
                >
              </view>
            </template>
            <template v-slot:text>
              <text
                class="gui-block gui-text-center gui-margin-top gui-color-gray"
                >还没有评论哦~</text
              >
            </template>
          </gui-empty>

          <!--					留言-->
          <view
            style="margin-top: 30rpx"
            class="gui-flex gui-row gui-nowrap gui-bg-white gui-space-between"
            v-for="(item, index) in replys"
            :key="index"
          >
            <image
              @tap="goCard(item.authorId)"
              style="width: 65rpx; height: 65rpx"
              :src="item.avatarUrl"
              class="gui-comments-face"
            ></image>
            <view
              :ref="item.replyId"
              :class="[domId == item.replyId ? 'reply-checked' : '']"
              style="width: 610rpx"
              class="gui-comments-body"
            >
              <view
                class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center"
                style="position: relative"
              >
                <text
                  @tap="goCard(item.authorId)"
                  class="gui-comments-header-text gui-text"
                  style="color: #acacac; font-size: 26rpx"
                  >{{ item.authorName }}

                  <text
                    style="
                      font-size: 22rpx !important;
                      background: #ffeceb !important;
                      color: #fa5f5a;
                      border-radius: 20rpx;
                      width: 90rpx;
                      padding: 5rpx 10rpx;
                      text-align: center;
                    "
                    v-show="item.authorId == note.authorId"
                  >
                    作者
                  </text>
                </text>

                <view
                  @tap="upReply(item)"
                  style="
                    position: absolute;
                    right: 0;
                    top: 40rpx;
                    width: 50rpx;
                    font-size: 24rpx;
                    text-align: center;
                  "
                >
                  <text
                    style="width: 50rpx; text-align: center"
                    :class="[
                      'gui-comments-header-text',
                      'gui-icons',
                      'xhs-font28',
                      item.isUp ? 'zan-active xhs-font35' : 'gui-color-gray',
                    ]"
                    >{{ item.isUp ? "&#xe605;" : "&#xe6ad;" }}
                  </text>

                  <view class="gui-color-gray" v-show="item.upCount > 0"
                    >{{ item.upCount }}
                  </view>
                </view>
              </view>
              <text
                class="gui-block"
                style="width: 80%; font-size: 26rpx; margin-top: 8rpx"
                >{{ item.replayContent }}</text
              >
              <view
                style="margin-top: 8rpx"
                class="gui-comments-imgs gui-flex gui-rows gui-wrap"
                v-if="item.imgs"
              >
                <view @click.stop="showImgs(index, 0)">
                  <gui-image
                    :src="item.imgs[0]"
                    borderRadius="10rpx"
                  ></gui-image>
                </view>
              </view>
              <view
                class="gui-color-gray"
                style="font-size: 24rpx; margin-top: 8rpx"
              >
                <text
                  >{{ formatDate(item.createTime) }}
                  {{ item.ipRealAddress }}</text
                >
                <text
                  style="color: #5a5a5a; margin-left: 10rpx"
                  @tap="openComment(item.replyId)"
                  >回复</text
                >
              </view>
              <view
                class="xhs-gray-color"
                style="
                  font-size: 24rpx;
                  margin-top: 8rpx;
                  background: #f8f8f8 !important;
                  border-radius: 20rpx;
                  width: 80rpx;
                  padding: 5rpx;
                  text-align: center;
                "
                v-show="item.firstReplay == 1"
              >
                首评
              </view>

              <view v-if="item.reply">
                <view
                  style="margin-top: 20rpx; position: relative"
                  class="gui-flex gui-row gui-align-items-start"
                  v-for="(itemRe, indexRe) in item.reply"
                  :key="indexRe"
                  :ref="itemRe.replyId"
                  :class="[domId == itemRe.replyId ? 'reply-checked' : '']"
                >
                  <view>
                    <image
                      @tap="goCard(itemRe.authorId)"
                      style="width: 40rpx; height: 40rpx"
                      class="gui-list-image ucenter-face-image"
                      :src="itemRe.avatarUrl"
                      mode="aspectFill"
                    ></image>
                  </view>
                  <view style="margin-left: 10rpx">
                    <view
                      @tap="goCard(itemRe.authorId)"
                      style="height: 20rpx; color: #acacac; font-size: 26rpx"
                      >{{ itemRe.authorName }}
                      <text
                        style="
                          font-size: 22rpx !important;
                          background: #ffeceb !important;
                          color: #fa5f5a;
                          border-radius: 20rpx;
                          width: 90rpx;
                          padding: 5rpx 10rpx;
                          text-align: center;
                        "
                        v-show="itemRe.authorId == note.authorId"
                      >
                        作者
                      </text>
                    </view>

                    <view style="margin-top: 20rpx">
                      <text
                        class="gui-block"
                        style="font-size: 26rpx; margin-top: 8rpx"
                      >
                        <text v-show="itemRe.parentAuthorName">回复</text
                        ><text
                          style="
                            height: 20rpx;
                            color: #acacac;
                            font-size: 26rpx;
                          "
                          v-show="itemRe.parentAuthorName"
                          @tap="goCard(itemRe.authorId)"
                          >: {{ itemRe.parentAuthorName }}</text
                        >
                        {{ itemRe.replayContent }}
                      </text>
                    </view>

                    <view
                      class="gui-color-gray"
                      style="font-size: 24rpx; margin-top: 8rpx"
                    >
                      <text
                        >{{ formatDate(itemRe.createTime) }}
                        {{ itemRe.ipRealAddress }}</text
                      >
                      <text
                        style="color: #5a5a5a; margin-left: 10rpx"
                        @tap="openComment(item.replyId, itemRe.replyId)"
                        >回复</text
                      >
                    </view>
                  </view>

                  <view
                    @tap="upReply(itemRe)"
                    style="
                      position: absolute;
                      right: 0;
                      top: 0;
                      width: 50rpx;
                      font-size: 24rpx;
                      text-align: center;
                    "
                  >
                    <text
                      style="width: 50rpx; text-align: center"
                      :class="[
                        'gui-comments-header-text',
                        'gui-icons',
                        'xhs-font28',
                        itemRe.isUp
                          ? 'zan-active xhs-font35'
                          : 'gui-color-gray',
                      ]"
                      >{{ itemRe.isUp ? "&#xe605;" : "&#xe6ad;" }}
                    </text>
                    <view class="gui-color-gray" v-show="itemRe.upCount > 0">{{
                      itemRe.upCount
                    }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 评论组件 -->
      <gui-submit-comment
        :focus="true"
        :placeholder="'爱评论的人运气都不差'"
        ref="guisubmitcomment"
        :isImg="true"
        @submit="submit"
        @close="close"
      ></gui-submit-comment>
    </template>

    <template v-slot:gFooter>
      <!-- 底部弹出按钮 -->
      <view
        v-if="buttonShow"
        class="gui-bg-white gui-dark-bg-level-2 footer gui-border-box gui-border-t"
      >
        <view
          class="gui-dark-bg-level-3 gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center"
        >
          <text
            @tap="openComment()"
            style="
              height: 50rpx;
              line-height: 50rpx;
              padding: 10rpx 0 10rpx 25rpx;
              border-radius: 50rpx;
              font-size: 30rpx;
            "
            class="gui-footer-input gui-bg-gray gui-color-gray"
            ><text class="gui-icons">&#xe69e;</text> &nbsp;说点什么...</text
          >

          <text
            class="gui-color-black"
            style="font-size: 30rpx; font-weight: 600"
          >
            <text
              @tap="upNote(note)"
              style="width: 150rpx; text-align: center; margin-left: 25rpx"
              :class="['gui-icons', note.isUp ? 'zan-active' : '']"
              class="gui-icons"
              >{{ note.isUp ? "&#xe605;" : "&#xe6ad;" }}
              <text class="gui-color-black">{{ note.upCount }}</text></text
            >

            <text
              @tap="starNote(note)"
              style="
                width: 150rpx;
                text-align: center;
                margin-right: 25rpx;
                margin-left: 25rpx;
              "
              :class="['gui-icons', note.isStar ? 'star-active' : '']"
              class="gui-icons"
            >
              {{ note.isStar ? "&#xe634;" : "&#xe645;" }}
              <text class="gui-color-black">{{ note.starCount }}</text></text
            >

            <text
              style="width: 150rpx; text-align: center; margin-right: 15rpx"
              class="gui-icons"
              @tap="openComment()"
              >&#xe6b8; {{ totalCount }}</text
            >
          </text>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script>
import commonMixin from "@/mixin/commonMinxin";

var face =
  "https://images.unsplash.com/photo-1663717249250-804cb861ed74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5M3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80";
var img =
  "https://images.unsplash.com/photo-1661956601349-f61c959a8fd4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw5N3x8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60";

export default {
  mixins: [commonMixin],
  data() {
    return {
      imgIndex: 0,
      swiperItems2: [],
      note: {},
      timer: null,
      // 模拟评论数据 (实际项目来自api请求)
      replys: [],
      totalCount: 0,
      buttonShow: true,
      domId: "",
      user: uni.app.getStorage("user"),
      author: {},
    };
  },
  mounted() {
    if (!uni.app.isEmpty(this.domId)) {
      this.$nextTick(() => {
        setTimeout(() => {
          uni.pageScrollTo({
            scrollTop: this.$refs[this.domId][0].$el.offsetTop,
            duration: 200,
          });
        }, 200);
      });
    }
  },
  methods: {
    getAuthor() {
      uni.app.get(
        "/auth/getAuthor",
        { authorId: this.note.authorId },
        "",
        (res) => {
          console.log(res);
          this.author = res.data;
        },
      );
    },
    goBack: function () {
      uni.navigateBack({ delta: 1 });

      // uni.app.navigate('/pages/switchPages/index','switchTab')
    },
    editNote() {
      uni.app.navigate(
        "/pages/editNote/editNote?noteId=" + this.note.noteId,
        "redirectTo",
      );
    },
    goCard(authorId) {
      return uni.app.goCard(authorId);
    },
    formatDate(date) {
      return uni.app.formatDate(date);
    },
    upReply(reply) {
      uni.app.post("/auth/upReply", reply, "json", "", (res) => {
        console.log(res.data);
        if (res.data) {
          reply.isUp = true;
          reply.upCount++;
        } else {
          reply.isUp = false;
          reply.upCount--;
        }
      });
    },
    //点赞笔记
    upNote(notes) {
      uni.app.post("/auth/upNote", notes, "json", "", (res) => {
        console.log(res.data);
        if (res.data) {
          notes.isUp = true;
          notes.upCount++;
        } else {
          notes.isUp = false;
          notes.upCount--;
        }
      });
    },
    starNote(notes) {
      uni.app.post("/auth/starNote", notes, "json", "", (res) => {
        console.log(res.data);
        if (res.data) {
          notes.isStar = true;
          notes.starCount++;
        } else {
          notes.isStar = false;
          notes.starCount--;
        }
      });
    },
    showImgs: function (commentsIndex, imgIndex) {
      console.log(commentsIndex, imgIndex);
      uni.previewImage({
        urls: this.commentContents[commentsIndex].imgs,
        current: this.commentContents[commentsIndex].imgs[imgIndex],
      });
    },
    swiperchange: function (e) {
      console.log(e);
    },
    setTimer() {
      if (this.timer != null) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        clearTimeout(this.timer);
        this.timer = null;
      }, 3000);
    },
    taped: function (e) {
      this.imgIndex = e;
      //当图片发生切换时显示tips三秒后关闭
      this.setTimer();
    },
    getNoteDetail(noteId) {
      uni.app.get("/getNote", { noteId: noteId }, "", (res) => {
        if (res.code == 500) {
          // 返回上一级页面
          uni.app.navigate("/pages/switchPages/index", "reLaunch");
          return;
        }
        this.note = res.data;

        this.getAuthor();
        console.log(this.note);
        if (this.note.imgList) {
          for (let i of this.note.imgList) {
            this.swiperItems2.push({
              img: i,
              url: "",
              title: "",
              opentype: "click",
            });
          }
        }
        //请求成功后再弹tips
        this.setTimer();
      });
    },
    getNoteReply(noteId) {
      uni.app.get("/auth/getNoteReply", { noteId: noteId }, "", (res) => {
        console.log(res.data);
        this.replys = res.data.replys;
        this.totalCount = res.data.totalCount;
      });
    },
    // 打开提窗口
    openComment: function (topParentId, parentId) {
      this.buttonShow = false;
      this.$refs.guisubmitcomment.open();
      this.$refs.guisubmitcomment.setAt(""); // 设置 at 信息
      // 模拟设置默认值， 不需要请删除
      this.$refs.guisubmitcomment.setContent(""); // 设置 at 信息

      this.$refs.guisubmitcomment.setData({
        ...this.note,
        parentId: parentId,
        topParentId: topParentId,
      }); // 设置 at 信息
    },
    // 关闭窗口
    close: function () {
      // 展示底部按钮
      this.buttonShow = true;
    },
    submit: function (e) {
      console.log(e);
      if (uni.app.isEmpty(e.content)) {
        uni.app.msg("请输入评论内容~");
        return;
      }
      const replyData = {
        noteId: e.noteId,
        replayContent: e.content,
      };
      if (!uni.app.isEmpty(e.topParentId)) {
        replyData.topParentId = e.topParentId;
      }
      if (!uni.app.isEmpty(e.parentId)) {
        replyData.parentId = e.parentId;
      }
      uni.app.post("/auth/replyNote", replyData, "json", "", (res) => {
        console.log(res);
        this.getNoteReply(e.noteId);
      });
      console.log(e);
      // 评论数据以对象形式报错在 e 变量内，您可以连接 api 进行后续的功能开发
      // e.at - at 用户昵称
      // e.content 评论内容 , 可以此处进行字数验证
      // e.img 评论图片, 临时地址，可以结合 api 进行上传
    },
  },
  onLoad: function (e) {
    let checkLogin = uni.app.checkLogin();
    if (checkLogin) {
      this.getNoteDetail(e.noteId);
      this.getNoteReply(e.noteId);
      this.domId = e.domId;
    }
  },
};
</script>
<style scoped>
.page-tips {
  background: #000000;
  opacity: 0.5;
  border-radius: 30rpx;
  text-align: center;
  width: 30px;
  line-height: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  color: #fff;
  font-size: 25rpx;
  z-index: 1;
}
.footer {
  height: 100rpx;
  padding: 15rpx;
  width: 100%;
}

.zan-active {
  color: #ff0036;
}
.star-active {
  color: #f7bd5c;
}

/*.reply-checked{*/
/*	background-color: gray;*/
/*	transition: background-color 3s ease; !* 设置过渡效果，时长3秒，过渡效果为缓动 *!*/
/*}*/

.reply-checked {
  animation: changeBgColor 3s forwards; /* 应用名为changeBgColor的动画，时长3秒，结束后保持最后一帧状态 */
}

@keyframes changeBgColor {
  0% {
    background-color: #eeeeee;
  }
  100% {
    background-color: transparent; /* 最终变为透明 */
  }
}

/* #ifdef MP */
.xhs-follow {
  margin-right: 320rpx !important;
}

.gui-header-detail {
  background: #ffffff !important;
}

.message-search {
  width: 80%;
}

::v-deep .gui-header {
  background: white;
}
/* #endif */

/* #ifdef APP-PLUS */
::v-deep .gui-header {
  background: white;
}
/* #endif */

.gui-course-video {
  width: 750rpx;
  margin-top: -44px;
  z-index: 1;
}
</style>
